<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章中心 | 白子俊</title>
    <link rel="stylesheet" href="assets/font-awesome/css/all.min.css">
    <link href="//fonts.alibabausercontent.com/icon?family=AlibabaPuHuiTi&display=swap" rel="stylesheet">
    
    <!-- 新增必要的JS库 -->
    <script src="//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.12.0/dist/av-min.js"></script>

    <style>
        :root {
            --primary: #6D8B74;
            --secondary: #94B49F;
            --accent: #9DAB86;
            --light: #F5F0E1;
            --white: #FFFFFF;
            --dark: #4D4D4D;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            font-family: "AlibabaPuHuiTi", sans-serif;
            line-height: 1.6;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .back-button {
            display: inline-flex;
            align-items: center;
            margin-bottom: 30px;
            color: var(--primary);
            text-decoration: none;
            font-size: 16px;
        }
        
        .back-button i {
            margin-right: 8px;
        }
        
        h1 {
            color: var(--primary);
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            padding-bottom: 15px;
        }
        
        h1::after {
            content: "";
            display: block;
            width: 80px;
            height: 4px;
            background: var(--accent);
            margin: 15px auto;
        }
        
        .article-list {
            background: var(--white);
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .article-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .article-item:last-child {
            border-bottom: none;
        }
        
        .article-link {
            color: var(--primary);
            text-decoration: none;
            font-size: 1.1em;
            transition: color 0.3s;
        }
        
        .article-link:hover {
            color: var(--accent);
        }
        
        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .article-date {
            color: #888;
            font-size: 0.9em;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 1000;
            overflow-y: auto;
        }
        
        .modal-content {
            background-color: var(--white);
            margin: 50px auto;
            padding: 40px;
            border-radius: 8px;
            max-width: 800px;
            width: 90%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            position: relative;
        }
        
        .modal-title {
            font-size: 1.5em;
            color: var(--primary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-text {
            white-space: pre-line;
            line-height: 1.8;
            color: #555;
        }
        
        .close-modal {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 1.8em;
            color: #999;
            cursor: pointer;
        }
        
        /* 评论区域 */
        .comments-section {
            margin-top: 40px;
            padding: 30px;
            background: var(--white);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .comments-section h3 {
            font-size: 1.2em;
            color: var(--primary);
            margin-bottom: 20px;
        }
        
        .comment-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .comment-author {
            font-weight: bold;
            color: var(--secondary);
        }
        
        .comment-date {
            font-size: 0.8em;
            color: #888;
            margin-left: 10px;
        }
        
        .comment-input-area {
            margin-top: 30px;
        }
        
        #commentInput {
            width: 100%;
            height: 100px;
            margin: 20px 0;
            padding: 15px;
            border: 1px solid var(--secondary);
            border-radius: 6px;
            resize: vertical;
        }
        
        #submitComment {
            padding: 10px 20px;
            background-color: var(--accent);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        #submitComment:hover {
            background-color: #899c71;
        }

        /* 页脚样式 */
        footer {
            background-color: var(--dark);
            color: var(--white);
            padding: 60px 20px 30px;
            text-align: center;
            font-size: 0.95em;
            margin-top: 40px;
        }

        .contact-info {
            margin: 20px 0;
            line-height: 1.8;
            opacity: 0.8;
        }

        .social-icons {
            margin: 30px 0;
        }

        .social-icons a {
            color: var(--white);
            margin: 0 15px;
            font-size: 20px;
            transition: all 0.3s ease;
            opacity: 0.7;
        }

        .social-icons a:hover {
            color: var(--accent);
            opacity: 1;
        }

        .beian {
            margin-top: 30px;
            font-size: 0.85em;
            color: rgba(255,255,255,0.6);
        }

        .beian a {
            color: rgba(255,255,255,0.6);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .beian a:hover {
            color: var(--accent);
        }
    </style>
</head>
<body>
    <a href="more.html" class="back-button">
        <i class="fas fa-arrow-left"></i>返回
    </a>
    
    <h1>文章中心</h1>
    
    <div class="article-list">
        <!-- 手动维护文章列表 -->
        <div class="article-item">
            <div class="article-meta">
                <a href="#" class="article-link" data-file="article/测试文件.txt">测试文件</a>
                <span class="article-date">20230815</span>
            </div>
        </div>
        
        <div class="article-item">
            <div class="article-meta">
                <a href="#" class="article-link" data-file="article/journey.txt">我的音乐学习之路</a>
                <span class="article-date">20230815</span>
            </div>
        </div>
        
        <div class="article-item">
            <div class="article-meta">
                <a href="#" class="article-link" data-file="article/beethoven.txt">贝多芬作品分析</a>
                <span class="article-date">20230910</span>
            </div>
        </div>
    </div>

    <!-- 弹窗容器 -->
    <div class="modal" id="articleModal">
        <div class="modal-content">
            <span class="close-modal" id="closeModal">&times;</span>
            <h2 class="modal-title" id="modalTitle"></h2>
            <div class="modal-text" id="modalText"></div>
            
            <!-- 评论区域 -->
            <div class="comments-section">
                <h3>读者评论（<span id="commentCount">0</span>）</h3>
                <div id="commentsList"></div>
                
                <div class="comment-input-area">
                    <textarea id="commentInput" placeholder="请输入您的评论..."></textarea>
                    <button id="submitComment">提交评论</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // LeanCloud初始化
        AV.init({
          appId: '0lpjg6Zgwua9jqUZDeJMVxpr-gzGzoHsz',
          appKey: 'gV34QMHiVXzzDiS4GdyXtZt9',
          serverURL: 'https://0lpjzgw.lc-cn-n1-shared.com'
        });

        // 弹窗控制
        const modal = document.getElementById('articleModal');
        const closeBtn = document.getElementById('closeModal');
        
        // 为所有文章链接添加点击事件
        document.querySelectorAll('.article-link').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                // 移除其他文章的active状态
                document.querySelectorAll('.article-link').forEach(l => l.classList.remove('active'));
                // 为当前点击的文章添加active状态
                this.classList.add('active');
                
                const filePath = this.getAttribute('data-file');
                const title = this.textContent;
                const dateString = this.closest('.article-meta').querySelector('.article-date').textContent;
                const formattedDate = `${dateString.slice(0,4)}-${dateString.slice(4,6)}-${dateString.slice(6,8)}`;
                
                // 显示加载状态
                document.getElementById('modalTitle').textContent = `${title} (${formattedDate})`;
                document.getElementById('modalText').textContent = '加载中...';
                modal.style.display = 'block';
                
                // 加载文章内容
                fetch(filePath)
                    .then(response => response.text())
                    .then(content => {
                        document.getElementById('modalText').textContent = content;
                        loadComments(filePath);
                    })
                    .catch(() => {
                        document.getElementById('modalText').textContent = '加载失败，请稍后重试';
                    });
            });
        });
        
        // 关闭弹窗
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });
        
        // 点击模态框外部关闭
        window.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
        
        // 修改后的评论功能逻辑
        document.getElementById('submitComment').addEventListener('click', async () => {
            const user = AV.User.current();
            if (!user) {
                alert('请先登录');
                return;
            }

            const content = document.getElementById('commentInput').value.trim();
            if (!content) return;

            // 获取当前激活的文章ID
            const activeLink = document.querySelector('.article-link.active');
            if (!activeLink) {
                alert('无法获取文章信息');
                return;
            }
            const articleId = activeLink.getAttribute('data-file');

            try {
                // 保存评论到LeanCloud
                const Comment = AV.Object.extend('Comment');
                const newComment = new Comment();
                
                newComment.set('articleId', articleId);
                newComment.set('content', content);
                newComment.set('author', user.get('nickname') || user.getUsername());
                newComment.set('user', user);
                
                await newComment.save();
                
                // 清空输入框并刷新评论列表
                document.getElementById('commentInput').value = '';
                loadComments(articleId);
            } catch (err) {
                console.error('评论提交失败:', err);
                alert('评论提交失败，请稍后重试');
            }
        });

        // 修改后的加载评论方法
        async function loadComments(articleId) {
            try {
                const query = new AV.Query('Comment');
                query.equalTo('articleId', articleId);
                query.include('user');
                query.descending('createdAt');
                const comments = await query.find();

                let html = '';
                comments.forEach(comment => {
                    const date = new Date(comment.get('createdAt')).toLocaleDateString();
                    html += `<div class="comment-item">
                        <div class="comment-author">${comment.get('author')} 
                            <span class="comment-date">${date}</span>
                        </div>
                        <div class="comment-content">${comment.get('content')}</div>
                    </div>`;
                });

                document.getElementById('commentsList').innerHTML = html;
                document.getElementById('commentCount').textContent = comments.length;
            } catch (err) {
                console.error('加载评论失败:', err);
                document.getElementById('commentsList').innerHTML = '评论加载失败';
            }
        }

        // 用户状态检测
        function checkAuth() {
            const user = AV.User.current();
            if (!user) {
                alert('请先登录');
                return false;
            }
            return true;
        }

        // 初始化用户状态
        $(document).ready(() => {
            const user = AV.User.current();
            if (!user) {
                alert('请登录后使用评论功能');
            }
        });
    </script>

    <!-- 页脚部分 -->
    <footer>
        <p>笃行致远  事必尽善</p>
        <div class="contact-info">
            <p>WeChat: FreedomOfSpace</p>
            <p>电子邮件: CHNbaizijun@163.com</p>
        </div>
        <div class="social-icons">
            <a href="#"><i class="fab fa-weixin"></i></a>
            <a href="#"><i class="fab fa-weibo"></i></a>
            <a href="#"><i class="fab fa-qq"></i></a>
            <a href="mailto:CHNbaizijun@163.com"><i class="fas fa-envelope"></i></a>
        </div>
        <div class="beian">
            <a href="https://beian.miit.gov.cn">京ICP备XXXXXXXX号</a>
        </div>
    </footer>

</body>
</html>